<template>
    <div id="app" class="carousel">
        <div class="messageNav">
            <div>
                <div><span class="glyphicon glyphicon-certificate"></span></div>
                <div>活动管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-certificate"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    活动管理
                </div>
            </div>
        </div>
        <div class="harnDeta" v-loading.body="loading" element-loading-text="拼命加载中">
            <div class="harnNav">
                <div class="seek">
                </div>
                <div class="add" @click="addPopupClick">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="detail">
                <ul>
                    <li class="firstLi">
                        <div>活动名称</div>
                        <div>时间</div>
                        <div>内容</div>
                        <div>创建时间</div>
                        <div class="delHarn">操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div>无</div>
                        <div class="imgLi">
                            <img :src="item.img | imgUrlFun" alt="">
                            <div class="bgImgLi">
                                <img :src="item.img | imgUrlFun" alt="">
                            </div>
                        </div>
                        <div v-if="item.url.length > 0">{{item.url}}</div>
                        <div v-else>无</div>
                        <div>{{item.ctime | ctimeFun}}</div>
                        <div class="delHarn">
                            <template>
                                <el-button class="elbut" type="text" @click="delClick(index)">
                                    <span class="glyphicon glyphicon-trash"></span>删除
                                </el-button>
                            </template>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange" :page-sizes="[20, 40, 60, 80]"
                                :page-size="pageSizeNum" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加通知弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMain" v-loading.body="adding" :style="{width:addWidth + 'px'}" v-show="isAddShow">
                    <div>
                        <h2>添加活动</h2>
                        <div @click="calladd" class="calladd">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addSide addSideS">
                        <div><small>*</small>热点名称：</div>
                        <div><input type="text" v-model="messObj.name" placeholder="请输入热点名称"></div>
                    </div>
                    <div class="addSide addSideS">
                        <div><small>*</small>热点内容：</div>
                        <div>
                            <textarea type="text" name="" id="" placeholder="请输入热点描述" v-model="messObj.dosc"></textarea>
                        </div>
                    </div>
                    <div class="promptC">
                        {{promptStr}}
                    </div>
                    <div class="operate">
                        <button @click="addClick" class="addClick">添加</button>
                        <button @click="calladd" class="calladd">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'carousel',
        data() {
            return {
                nullShow: true,
                addWidth: '530',
                items: [
                ],
                pageSizeNum: 20,
                totalNum: 0,
                currentPage: 1,
                isAddPopup: true,
                isShowAdd: true,
                isAddShow: false,
                messObj: {
                    name: '',
                    dosc: ''
                },
                promptStr: '带红色*号为必填项',
                loading: false,
                adding: false
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            },
            imgUrlFun: function (val) {
                if (val) {
                    return "http://" + global.logIp + ":" + global.logFileport + "/files" + val
                } else {
                    return '/static/img/errimg.png'
                }
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')
        },
        methods: {
            // 设置每页个数
            handleSizeChange(val) {
                // this.pageSizeNum = val;
                // var self = this;
                // self.loading = true
                // self.getNoticeAll({
                //     pageSize: val,
                //     number: 1
                // }).then((data) => {

                //     self.loading = false
                //     if (data.data.code == "200") {
                //         if (data.data.data.length > 0) {
                //             self.nullShow = false
                //             self.items = data.data.data
                //             self.totalNum = data.data.data.length
                //         } else {
                //             self.nullShow = true
                //         }
                //     }
                // }).catch(msg => console.log(msg))
            },
            // 点击分页
            handleCurrentChange(val) {
                // var self = this;
                // self.loading = true
                // self.getNoticeAll({
                //     pageSize: self.pageSizeNum,
                //     number: val
                // }).then((data) => {

                //     self.loading = false
                //     if (data.data.code == "200") {
                //         if (data.data.data.length > 0) {
                //             self.nullShow = false
                //             self.items = data.data.data
                //             self.totalNum = data.data.data.length
                //         } else {
                //             self.nullShow = true
                //         }
                //     }
                // }).catch(msg => console.log(msg))

            },
            // 显示添加通知弹出框
            addPopupClick() {
                this.isShowAdd = false
                this.isAddShow = true
            },
            // 取消添加通知弹出框
            calladd() {
                this.isShowAdd = true
                this.isAddShow = false
            },
            // 添加通知
            addClick() {
                var self = this
                if (self.messObj.name.length > 0 && self.messObj.dosc.length > 0) {
                    self.adding = true
                    self.getAddHotAct({
                        name: self.messObj.name,
                        desc: self.messObj.dosc
                    }).then((data) => {
                        console.log(data)
                        if (data.data.code == "200") {
                            self.adding = false
                            self.isShowAdd = true
                            self.isAddShow = false
                            self.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                        }
                    }).catch(msg => console.log(msg))
                } else {
                    if (self.messObj.name.length > 0 == 0) {
                        self.promptStr = '活动名称为必填'
                    } else if (self.messObj.dosc.length == 0) {
                        self.promptStr = '活动描述为必填'
                    }
                }
            },
            // 删除通知
            delClick(index) {
                var self = this;
                var userId = sessionStorage.getItem('userId')
                this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.getNoticeDel({
                        opid: userId,
                        id: self.items[index].id
                    }).then((data) => {

                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            self.loading = true
                            self.getNoticeAll({
                                pageSize: self.pageSizeNum,
                                number: self.currentPage
                            }).then((data) => {

                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data
                                        self.totalNum = data.data.data.length
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            ...mapActions(['getAddHotAct'])
        },
    }

</script>

<style scoped src="../../assets/css/carousel.css">

</style>